// Project Library
import { useEffect, useState } from "react";

// Soft UI Dashboard PRO React example components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
// @mui material components
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import PropTypes from "prop-types";
// Soft UI Dashboard PRO React components
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";
import SoftButton from "components/SoftButton";
import SoftSelect from "components/SoftSelect";
import SoftAvatar from "components/SoftAvatar";

// Soft UI Dashboard PRO React example components
import DataTable from "examples/Tables/DataTable";
import decor from "assets/images/home-decor-1.jpg";

import { projectList, projectChoose } from "request/api";
function ProjectLibrary() {
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState("");
  const [status, setStatus] = useState("");
  useEffect(() => {
    getProjectList();
  }, [status, page]);
  const [rows, setRows] = useState([]);
  // 获取项目列表
  const getProjectList = async () => {
    let params = {
      page: 1,
      pageSize: 10,
      status: status,
    };
    const res = await projectList(params);
    setRows(res.data);
  };
  // 添加或取消自选
  const handleChoose = async (e, { id, status }) => {
    e.stopPropagation();
    let params = {
      project_id: id,
      status: status,
    };
    await projectChoose(params);
    getProjectList();
  };
  const dataTableData = {
    columns: [
      {
        Header: "#",
        accessor: "index",
        Cell: ({ row }) => <SoftBox width="20px">{row.index + 1}</SoftBox>,
      },
      {
        Header: "Token",
        accessor: "name",
        Cell: ({ row: { original } }) => (
          <SoftBox display="flex" alignItems="center" lineHeight={1}>
            <SoftBox mr={2}>
              {original.image ? (
                <SoftAvatar
                  src={original.image}
                  alt={original.name}
                  size="sm"
                  variant="rounded"
                  sx={{ width: "32px", height: "32px" }}
                />
              ) : null}
            </SoftBox>
            <SoftTypography display="block" variant="caption" fontWeight="medium" fontSize="14px">
              {original.name}
            </SoftTypography>
            <SoftTypography
              display="block"
              variant="caption"
              fontWeight="medium"
              color="text"
              fontSize="14px"
              sx={{ ml: 1 }}
            >
              {original.symbol}
            </SoftTypography>
          </SoftBox>
        ),
      },
      {
        Header: "Current Price",
        accessor: "current_price",
        Cell: ({ value }) => <SoftBox width="90px">{value}</SoftBox>,
      },
      {
        Header: "24H",
        accessor: "price_change_percentage_24h",
        Cell: ({ row: { original } }) => (
          <SoftBox display="flex" alignItems="center" lineHeight={1}>
            <SoftBox
              color={original.price_change_percentage_24h > 0 ? "success" : "error"}
              lineHeight={0}
            >
              <Icon sx={{ fontWeight: "bold", width: "16px", height: "16px" }}>
                {original.price_change_percentage_24h > 0
                  ? "keyboard_arrow_up"
                  : "keyboard_arrow_down"}
              </Icon>
            </SoftBox>
            <SoftTypography
              variant="button"
              color={original.price_change_percentage_24h > 0 ? "success" : "error"}
            >
              {original.price_change_percentage_24h}%
            </SoftTypography>
          </SoftBox>
        ),
      },
      {
        Header: "Signal Price",
        accessor: "signal.price",
        Cell: ({ value }) => <SoftBox width="80px">{value}</SoftBox>,
      },
      {
        Header: "Backtest PnL",
        accessor: "backtestPnL",
        Cell: ({ value }) => <SoftBox width="80px">{value}</SoftBox>,
      },
      {
        Header: "Action",
        accessor: "signal.signal",
        Cell: ({ value }) => (
          <SoftBox width="50px">
            {value == 1 ? "做多" : value == 2 ? "平多" : value == 3 ? "做空" : "平空"}
          </SoftBox>
        ),
      },
      {
        Header: "Signal Interval",
        accessor: "signal.tradetime",

        Cell: ({ value }) => (
          <SoftBox width="90px">
            {value == 1 ? "15F" : value == 2 ? "1H" : value == 3 ? "6H" : "12H"}
          </SoftBox>
        ),
      },
      {
        Header: "Signal Time",
        accessor: "signal.operate_time",
      },
      {
        Header: " ",
        accessor: "id",
        disableSortBy: true,
        Cell: ({ row: { original } }) =>
          original.status == 1 ? (
            <SoftButton
              variant="gradient"
              color="dark"
              fullWidth
              sx={{ textTransform: "capitalize" }}
              onClick={(e) => handleChoose(e, original)}
            >
              Add Favorites
            </SoftButton>
          ) : (
            <SoftButton
              variant="gradient"
              color="light"
              fullWidth
              sx={{ textTransform: "capitalize" }}
              onClick={(e) => handleChoose(e, original)}
            >
              Remove Favorites
            </SoftButton>
          ),
      },
    ],
    rows: rows,
  };

  return (
    <DashboardLayout>
      <DashboardNavbar />
      <SoftBox my="72px">
        <Card>
          <SoftBox display="flex" justifyContent="space-between" alignItems="center" p={3}>
            <SoftBox lineHeight={1}>
              <SoftTypography variant="h5" fontWeight="medium">
                Project Library
              </SoftTypography>
            </SoftBox>
            <SoftBox width="264px">
              <SoftSelect
                placeholder="Select Type"
                isClearable
                options={[
                  { value: "1", label: "已发布" },
                  { value: "2", label: "已下架" },
                ]}
                onChange={(e) => {
                  if (e) {
                    setStatus(e.value);
                  } else {
                    setStatus(null);
                  }
                }}
              />
            </SoftBox>
          </SoftBox>
          <DataTable table={dataTableData} entriesPerPage={false} isRowClick />
        </Card>
      </SoftBox>
    </DashboardLayout>
  );
}

ProjectLibrary.propTypes = {
  row: PropTypes.any, // 或者根据实际情况修改验证规则
  value: PropTypes.any, // 或者根据实际情况修改验证规则
};

export default ProjectLibrary;
